<template>
	<div class="task-preview-container">
		<div class="task-details">
			<div class="task-info">
				<span class="info-label">编程语言:</span>
				<span class="info-value">Java</span>
			</div>
			<div class="task-info">
				<span class="info-label">模块名称:</span>
				<span class="info-value">基础知识</span>
			</div>
			<div class="task-info">
				<span class="info-label">难易程度:</span>
				<span class="info-value">中等题</span>
			</div>
			<div class="task-info">
				<el-checkbox value="" name="type">
					不会做
				</el-checkbox>
			</div>
		</div>
		<div class="task-content">
			【接口】创建一个接口 Bank，它包含方法 void deposit(double amount) 和 void withdraw(double amount)。
			然后创建一个类 SavingsAccount，它实现了 Bank 接口，并实现了存款和取款的方法。接着创建一个名为 BankCustomer 的类，
			它包含一个名为 account 的 Bank 接口类型的属性，以及一个方法 void transaction(double amount)，
			在该方法中调用 account 的存款和取款方法。
<pre><code>public static void main(String[] args){
    System.out.println("hello world!");
}</code></pre>
		
		<!-- 显示答案 -->
		<el-divider content-position="left">您的答案</el-divider>
		<el-input
			v-model="task.code"
			:autosize="{ minRows:15, maxRows: 180 }"
			type="textarea"
			placeholder="请输入任务答案" />
		</div>
	</div>

	
</template>

<script>

import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
export default {
	components: {
		HeaderNav,
		TaskContainer,
	},
	data() {
		return {
			task: {
				checked: false,
				code: "" ,
			}
		}
	}
}
</script>

<style scoped>
.task-preview-container {
	margin: 0 auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.task-header {
	text-align: center;
	margin-bottom: 20px;
}

.task-title {
	font-size: 28px;
	font-weight: bold;
	color: #333;
}

.task-details {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	background-color: #f3f3f3;
	margin-bottom: 10px;
	border-radius: 8px;
}

.task-info {
	flex: 1;
	text-align: center;
}

.info-label {
	font-weight: bold;
	color: #555;
	margin-right: 10px;
}

.info-value {
	color: #777;
}

.task-content {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	height: 600px;
	overflow: auto;
}

.task-content pre:has(>code) {
	background: #F0F2F5;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
}
.task-content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 14px;
}
</style>